<link rel="stylesheet" href="ccay/example/demo.css" type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/topbox/topBox.js" charset="utf-8"></script>

<div id="topBox">
	<div title="API">
		<div>
			<h2>Ccay.UI.topBox(content,isHtml,autoClose,css,delay,style,dialogOp)</h2>
			<h3>作用：tip 消息提示框</h3>
			<form id="param" class="init ccay-form">
				<div class="ccay-form-body">
                   	<ul></ul>
                </div>
                <table class="ccay-table">
                	<tr>
                		<td>
                			显示时间可全局配置：Ccay.UI.Config.topBox.timer
                		</td>
                	</tr>
                	<tr>
                		<td>
                			若content 太长可使用 ：Ccay.UI.Config.topBox.width 调整宽度
                		</td>
                	</tr>
                </table>
				<div class="ccay-form-custom">
					<ul>
						<li class="ccay-form-row">
							<samp>
								<h3>参数</h3>
							</samp>
							<span class="ccay-form-input">
								<h3>描述</h3>
							</span>
						</li>
						<li class="ccay-form-row">
							<samp class="i18n" i18nKey="content"></samp>
							<span class="ccay-form-input">{String}<p>需要展示的 内容</span>
						</li>
						<li class="ccay-form-row">
							<samp class="i18n" i18nKey="isHtml"></samp>
							<span class="ccay-form-input">{boolean}<p>是否直接显示内容(是否不国际化内容)，默认false</span>
						</li>
						<li class="ccay-form-row">
							<samp class="i18n" i18nKey="autoClose"></samp>
							<span class="ccay-form-input">{boolean}<p>是否手动关闭，默认false</span>
						</li>
						<li class="ccay-form-row">
							<samp class="i18n" i18nKey="css"></samp>
							<span class="ccay-form-input">{String}Or{obj}<p>可为对象{width:"550px"},也可为 样式名称</span>
						</li>
						<li class="ccay-form-row">
							<samp class="i18n" i18nKey="delay"></samp>
							<span class="ccay-form-input">{number}<p>显示时间</span>
						</li>
						<li class="ccay-form-row">
							<samp class="i18n" i18nKey="style"></samp>
							<span class="ccay-form-input">{String}<p>是否添加图片。可选值 donne、success、error、question、warn、forbid</span>
						</li>
						<li class="ccay-form-row">
							<samp class="i18n" i18nKey="dialogOp"></samp>
							<span class="ccay-form-input">{object}<p>dialog参数对象，可配置比如left 及 top 等</span>
						</li>
					</ul>
				</div>
			</form>
			<h2>Ccay.UI.topBox(op)</h2>
			<form id="param2" class="init ccay-form">
				<div class="ccay-form-body ccay-form-custom">
					<ul>
						<li class="ccay-form-row">
							<samp>
								<h3>参数</h3>
							</samp>
							<span class="ccay-form-input">
								<h3>描述</h3>
							</span>
						</li>
						<li class="ccay-form-row">
							<samp class="i18n" i18nKey="op"></samp>
							<span class="ccay-form-input">{object}<p>参数对象，属性可包括以上的 content,isHtml,autoClose,css,delay,style,dialogOp<p>其他属性如下：<p>&nbsp;</span>
							 <div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
	                            	<li class="ccay-form-row">
	                            		<samp><h3>属性</h3></samp>
	                            		<span class="ccay-form-input"><h3>描述</h3></span>
	                            	</li>
	                            	<li class="ccay-form-row">
									    <samp class="i18n" i18nKey="encode"></samp>							    
										<span class="ccay-form-input">{boolean}<p>是否转码显示。为false时直接显示 content，支持html显示</span>
									</li>
									<li class="ccay-form-row">
									    <samp class="i18n" i18nKey="type"></samp>							    
										<span class="ccay-form-input">{string}<p>显示类型，可选。可选值 big_sim ， big_com ,不传值按最基本的显示，<p style="color:red">有值时 style 无效,详见demo</span>
									</li>
									<li class="ccay-form-row">
									    <samp class="i18n" i18nKey="noTitle"></samp>							    
										<span class="ccay-form-input">{boolean}<p>是否不显示title，默认false</span>
									</li>
									<li class="ccay-form-row">
									    <samp class="i18n" i18nKey="character"></samp>							    
										<span class="ccay-form-input">{string}<p><font color="red">type为big_com时有效</font>，提示内容，详见demo</span>
									</li>
									<li class="ccay-form-row">
									    <samp class="i18n" i18nKey="title"></samp>							    
										<span class="ccay-form-input">{string}<p>标题，默认为“提示”</span>
									</li>
									<li class="ccay-form-row">
									    <samp class="i18n" i18nKey="forwardUrl"></samp>							    
										<span class="ccay-form-input">{string}<p>指定跳转页面Url</span>
									</li>
	                            </ul>
	                       </div>
	                    </li>
	                 </ul>
	             </div>
			</form>
		</div>
	</div>
	<div title="Demo">
	<!--  <div style='padding-left:30px'>-->
		<div class="demo">
	        <input type="button" onclick="Ccay.UI.topBox('ccay测试topBox')" value="基本" />
		</div>
		<div class="codeArea">
             	<label id="html">Ccay.UI.topBox('helllo,everyone!my name is Ccay!')</label>
		</div>
		
		<div class="demo">
	        <input type="button" onclick="Ccay.UI.topBox({content:'ccay测试topBox',style:'success'})" value="带图片" />
		</div>
		<div class="codeArea">
             	<label id="html">Ccay.UI.topBox( {content:'ccay测试topBox',style:'success'} )</label>
		</div>
		
		<div class="demo">
	        <input type="button" onclick="Ccay.UI.topBox({type:'big_sim',noTitle:true})" value="大成功提示框-简单" />
		</div>
		<div class="codeArea">
             	<label id="html"><pre>
//默认content 为：“提交成功！”
Ccay.UI.topBox(
	{
		type:"big_sim",
		noTitle:true
	}
);
				</pre></label>
		</div>
		
		<div class="demo">
	        <input type="button" onclick='Ccay.UI.topBox({css:{width:"520px"},character:"申请已提交成功，24小时内生效，可登录XX查询结果",forwardUrl:"ccay/example/ui/topbox/topBox.html",type:"big_com",noTitle:true})' value="大成功提示框-复杂" />
		</div>
		<div class="codeArea">
             	<label id="html"><pre>
//默认content 为：“恭喜您，提交成功！”
Ccay.UI.topBox(
	{
		character:"申请已提交成功，24小时内生效，可登录XX查询结果",
		forwardUrl:"ccay/security/userGroup/listUserGroup.html",//指定跳转url，可选
		type:"big_com",//可选值 : big_com    big_sim
		noTitle:true //是否显示title
	}
);
				</pre></label>
		</div>
		
	<!-- </div> -->
	</div>
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:100px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	 <div title="FAQ">
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
		    <ul>
		          <li class="ccay-form-row">
			            <samp><h3>问题</h3></samp>
			           <span class="ccay-form-input">
			               <h3>解决方案</h3>
			           </span>
			      </li>
		    </ul>
			</div>     
			<div class="ccay-form-custom">
			    <ul>                     
			        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
			        <li class="ccay-form-row">
			                          <samp class="i18n" i18nKey=""></samp>                          
			                         <span class="ccay-form-input"></span>
			        </li>  
			    </ul>
			</div>
		  </form>                    
	 </div>

</div>
